import { broadcast_history_info } from '@/services/broadcast';
import age from '@/utils/age';
import { default as time, default as timeToHms } from '@/utils/time';
import { ProColumns, ProDescriptions } from '@ant-design/pro-components';
import { Divider, message, Modal, Spin, Table, Tabs } from 'antd';
import moment from 'moment';
import { useEffect, useState } from 'react';
interface Iprops {
  checkModal: boolean;
  isShowCheckModal: (status: boolean) => void;
  historyId: string | undefined;
}
const oldmaninfo = {
  id: '001',
  name: '远程康复',
  health_visitor_name: 'h火火',
  health_visitor_positional: '主讲医生',
  start_time: '2023-10-19',
  real_start_time: '13:57:05',
  real_end_time: '14:01:09',
  real_total_time: '00:04:04',
  audience_count: '0',
};
type Info = {
  id: string;
  name: string;
  health_visitor_name: string;
  health_visitor_positional: string;
  start_time: string;
  real_start_time: string;
  real_end_time: string;
  real_total_time: string;
  audience_count: string;
};
type GithubIssueItem = {
  id: string;
  start_time: string;
  end_time: string;
  total_time: string;
  playback_url: string;
};
const BroadcastInfo = (props: Iprops) => {
  const { checkModal, isShowCheckModal, historyId } = props;
  // 存储直播历史详情
  const [broadcastInfo, setBroadcastInfo] = useState<any>(undefined);
  // 存储录制记录
  const [videoList, setVideoList] = useState<any>([]);
  // 存储观看人员列表
  const [audienceList, setAudienceList] = useState<any>([]);
  // 查看录制记录模态框
  const [viewButton, setviewButton] = useState(false);
  // 存储视频url
  const [videoplay, setvideoplay] = useState('');

  useEffect(() => {
    //   页面初始化获取患者信息
    const getData = async () => {
      if (historyId) {
        let request_body = {
          id: historyId,
        };
        let res: any = await broadcast_history_info(request_body);
        console.log('直播历史详情', res);
        if (res.msg == 'ok') {
          setBroadcastInfo(res.data);
          setVideoList(res.data.playback_url);
          setAudienceList(res.data.audience_list);
        } else {
          message.error(res.msg);
        }
      }
    };
    getData();
  }, []);

  // 查看
  const isShowEdit = (status: boolean, url: string) => {
    setviewButton(status);
    setvideoplay(url);
  };

  // 录制记录
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      key: 'index',
      align: 'center',
      render: (_: any, record: any, index: number) => {
        if (videoList.length != 0) {
          return `${index + 1}`;
        }
      },
    },
    {
      title: '开始时间',
      dataIndex: 'start_time',
      align: 'center',
      key: 'start_time',
    },
    {
      title: '结束时间',
      dataIndex: 'end_time',
      align: 'center',
      key: 'end_time',
    },
    {
      title: '时长',
      dataIndex: 'total_time',
      align: 'center',
      key: 'total_time',
      render: (_, record) => {
        return time(record.total_time);
      },
    },
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      render: (_, record) => [
        <a
          key="check"
          onClick={() => {
            isShowEdit(true, record.playback_url);
          }}
        >
          查看
        </a>,
      ],
    },
  ];
  // 观看人员
  const columns1: any = [
    {
      title: '序号',
      key: 'index',
      align: 'center',
      render: (_: any, record: any, index: number) => {
        if (audienceList.length != 0) {
          return `${index + 1}`;
        }
      },
    },
    {
      title: '手机号',
      align: 'center',
      key: 'phone',
      dataIndex: 'phone',
    },
    {
      title: '姓名',
      align: 'center',
      key: 'username',
      dataIndex: 'username',
    },
    {
      title: '性别',
      key: 'sex',
      align: 'center',
      dataIndex: 'sex',
      // valueType: 'select',
      render: (_: any, record: { sex: number }) => {
        if (record.sex == 1) {
          return '男';
        }
        if (record.sex == 2) {
          return '女';
        }
        if (record.sex == 0) {
          return '未知';
        }
      },
    },
    {
      title: '年龄',
      align: 'center',
      dataIndex: 'birth',
      render: (_: any, record: { birth: any }) => {
        return age(record.birth);
      },
    },
    {
      title: '初次进入时间',
      align: 'center',
      key: 'join_time',
      dataIndex: 'join_time',
    },
    {
      title: '最后退出时间',
      align: 'center',
      key: 'exit_time',
      dataIndex: 'exit_time',
    },
    {
      title: '观看总时长',
      align: 'center',
      dataIndex: 'total_times',
      key: 'total_times',
      render: (_: any, record: { total_times: undefined }) => {
        if (record.total_times != undefined) {
          return timeToHms(record.total_times);
        } else {
          return '';
        }
      },
    },
  ];
  return (
    <Modal
      title="历史直播"
      centered
      open={checkModal}
      onCancel={() => isShowCheckModal(false)}
      width={1200}
      destroyOnClose={true}
      footer={null}
    >
      <Divider />
      {broadcastInfo === undefined ? (
        <div
          style={{
            margin: '20px 0',
            marginBottom: '20px',
            padding: '30px 50px',
            textAlign: 'center',
          }}
        >
          <Spin size="large" />
        </div>
      ) : (
        <>
          <ProDescriptions
            title={`直播主题：${broadcastInfo.name}`}
            dataSource={broadcastInfo}
            columns={[
              {
                title: '主讲医生',
                key: 'platform_user_id',
                dataIndex: 'platform_user_id ',
                render: (_, record) => {
                  return record.user_name + '(' + record.positional_name + ')';
                },
              },
              {
                title: '直播日期',
                dataIndex: 'time',
                hideInSearch: true,
                ellipsis: false,
                render: (_, record) => {
                  return moment(record.start_time).format('YYYY-MM-DD');
                },
              },
              {
                title: '开始时间',
                hideInSearch: true,
                ellipsis: false,
                render: (_, record) => {
                  return record.real_start_time
                    ? moment(record.real_start_time).format('HH:mm:ss')
                    : '-';
                },
              },
              {
                title: '结束时间',
                hideInSearch: true,
                ellipsis: false,
                render: (_, record) => {
                  return record.real_end_time
                    ? moment(record.real_end_time).format('HH:mm:ss')
                    : '-';
                },
              },
              {
                title: '直播时长',
                hideInSearch: true,
                ellipsis: false,
                render: (_, record) => {
                  return time(record.real_total_time);
                },
              },
              {
                title: '观看人数',
                key: 'audience_count',
                dataIndex: 'audience_count',
                render: (_, record) => {
                  let text = '';
                  text += record.audience_count + '人';
                  return text;
                },
              },
            ]}
          ></ProDescriptions>
          <Tabs
            defaultActiveKey="录制记录"
            items={[
              {
                key: '录制记录',
                label: '录制记录',
                children: (
                  <Table
                    columns={columns}
                    dataSource={broadcastInfo.playback_url}
                    rowKey={(record) => record.id}
                    pagination={{ pageSize: 10 }}
                  />
                ),
              },
              {
                key: '观看人员',
                label: '观看人员',
                children: (
                  <Table
                    columns={columns1}
                    dataSource={audienceList}
                    rowKey={(record) => record.phone}
                    pagination={{ pageSize: 10 }}
                  />
                ),
              },
            ]}
          />
        </>
      )}
      {/* 查看录制记录 */}
      <Modal
        centered
        open={viewButton}
        onCancel={() => setviewButton(false)}
        destroyOnClose={true}
        footer={null}
        closable={true}
        maskClosable={false}
        width={800}
      >
        <div
          style={{
            paddingTop: '18px',
          }}
        >
          <video width="100%" height="100%" controls={true} autoPlay>
            <source src={videoplay} type="video/mp4" />
          </video>
        </div>
      </Modal>
    </Modal>
  );
};
export default BroadcastInfo;
